<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="serialNo" label="序号" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="repayTime" label="代偿时间" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="repayMoney" label="代偿金额（元）" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="occupancyFee" label="资金占用费（担保）" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="paymentTime" label="支付时间" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="handleRepayTime" label="处理时间" align="center" :show-overflow-tooltip="true" />
      <el-table-column fixed="right" label="操作" width="250" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="addInfo(row)" style="color: #28B779"
                     v-no-more-click>添加数据
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="tips-t">{{ combinedText }}</div>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination background layout="total,prev, pager, next, sizes" :total="total" :page-size="query.pageSize"
                     :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <el-dialog title="添加数据：" :visible.sync="compensatory" append-to-body width="60%" top="30px"
               @close="closeAddData">
      <el-row>
        <el-form :inline="true"  style="text-align: left" label-width="160px" ref="addForm"
                 :model="addForm">
          <el-col :span="12" class="indexClass">
            <el-form-item label="资金占用费（担保）：" prop="occupancyFee">
              <el-input v-model="addForm.occupancyFee"></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付时间：" prop="paymentTime">
              <el-date-picker v-model="addForm.paymentTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                              placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dbfqForm">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>
<script>
import {
  getRepayInfo,
  getCompensatoryTotal,
  addRepayInfo
} from "../../../src/assets/js/api";

export default {
  name: "detailCompensation",
  props: ["id"],
  data() {
    return {
      query: {
        pageSize: 10,
        pageNum: 1
      },
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      combinedText: "",//合计
      compensatory: false,
      addForm: {}
    };

  },
  mounted() {
    this.getList();
    this.getCompensatoryTotal();


  },
  methods: {
    //提交添加数据
    dbfqForm(){
      addRepayInfo(this.addForm).then(()=>{
        this.$message.success("提交成功");
        this.$refs["addForm"].resetFields();
        this.closeAddData();
        this.getList();

      })
    },
    //关闭添加数据
    closeAddData(){
      this.compensatory=false;
    },
    //添加数据弹窗
    addInfo(row) {
        this.compensatory=true;
        this.addForm.id=row.id;
        this.addForm.loanId=row.loanId;

    },

    //合计
    getCompensatoryTotal() {
      getCompensatoryTotal(this.id).then((res) => {
        this.combinedText = res.data;
      });
    },
    //列表
    getList() {
      getRepayInfo({
        id: this.id,
        ...this.query
      }).then((res) => {
        this.tableData = res.data.records;
        this.currentPage = res.data.current;
        this.total = res.data.total;
        this.pages = res.data.pages;

      });
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNum = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    }
  }


};
</script>
<style scoped type="less">
::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  left: 0;
  margin-top: 15px;
  color: rgba(51, 51, 51, 1);
}

.tips-t {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-top: 21px;
}
::v-deep .el-dialog__footer{
  text-align: center;
}

/deep/ .indexClass {
  position: relative;
}
.indexBox {
  position: absolute;
  top: 10px;
  right: 25%;
  /*font-size: 18px;*/
  /*color: red;*/
}
</style>
